<template>
  <div class="app" :style="{minHeight:taskHeight}">
    <div :class="[componentType=='task'?'task-left_type':'task-left']" v-loading="loading">
      <div class="task-left-header">
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="需求" name="00"></el-tab-pane>
          <el-tab-pane label="设计" name="01"></el-tab-pane>
          <el-tab-pane label="开发" name="02"></el-tab-pane>
          <el-tab-pane label="测试" name="04"></el-tab-pane>
          <el-tab-pane label="缺陷" name="05"></el-tab-pane>
          <el-tab-pane label="其他" name="06"></el-tab-pane>
        </el-tabs>
        <div style="display:flex">
          <div class="document-right-header-right-switch" v-if="componentType=='task'">
            <div :class="[switchType == 'list'?'switch-bg':'']"
                 class="document-right-header-right-switch-item" @click="loadSwitch('list')">
              <!-- <i :class="[switchType == 'list'?'':'switch-color']"
                class="iconfont icon-hang document-right-header-right-switch-item-title"></i> -->
              <span :class="[switchType == 'list'?'':'switch-color']"
                    class="document-right-header-right-switch-item-title">列</span>
            </div>
            <div :class="[switchType == 'chart'?'switch-bg':'']"
                 class="document-right-header-right-switch-itemTwo" @click="loadSwitch('chart')">
              <!-- <i :class="[switchType == 'chart'?'':'switch-color']"
                class="iconfont icon-lietu document-right-header-right-switch-item-title"></i> -->
              <span :class="[switchType == 'chart'?'':'switch-color']"
                    class=" document-right-header-right-switch-item-title">甘</span>
            </div>
          </div>
          <el-button type="primary" icon="el-icon-plus" @click="taskAdd" v-permission="'task:form:save'">新增
          </el-button>
        </div>
      </div>

      <div class="task-select">
        <condition-project class="task-more-item mb-8" v-if="!this.$route.query.id" @selectProj="selectProj"
                           ref="proj"></condition-project>
        <condition-person-in-charge :projId="projId" @selectPerson="selectPerson" class="task-more-item mb-8"
                                    ref="masterUser"></condition-person-in-charge>
        <condition-status ref="status" :status="activeName" class="task-more-item mb-8"
                          @satausClick="satausClick"></condition-status>
        <condition-priority ref="matrix" @selectPriority="selectPriority"
                            class="task-more-item mb-8"></condition-priority>
        <condition-tags ref="tags" @tagClick="tagClick" class="task-more-item mb-8"></condition-tags>
        <condition-key-word ref="name" @selectInput="selectInput"></condition-key-word>
        <span class="emptyTitle mb-8" @click="emptyClick">清空</span>
      </div>
      <div v-if="switchType=='list'" style="overflow-y: auto;" :style="{height:curHeight+'px'}">
        <div class="more-screen-box" :class="[moreType==true?'more-screen-show':'more-screen-hidden']">
          <div class="task-select-more"></div>
        </div>
        <taskIndex :taskForm="taskForm"></taskIndex>
      </div>
      <div class="task-pagination" v-if="switchType==='list'">
        <pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size"
                    @pagination="list"/>
      </div>
      <div v-if="switchType=='chart'" style="width:100%;overflow: hidden;">
        <ganttchart ref="ganttchart" :form='projectform'></ganttchart>
      </div>
    </div>
    <rename ref="renames"></rename>
    <del-contnet ref="del"></del-contnet>
  </div>
</template>

<script>
import utils from '@/utils/utils'
import selectRole from '../../../components/screen/selectRole'
import taskIndex from '../../../components/task/index.vue'
import rename from './components/rename.vue'
import delContnet from './components/del.vue'
import conditionProject from '../../../components/condition/project.vue'
import conditionPersonInCharge from '../../../components/condition/personInCharge.vue'
import conditionMilepost from '../../../components/condition/milepost.vue'
import conditionCreator from '../../../components/condition/creator.vue'
import conditionCollaborators from '../../../components/condition/collaborators.vue'
import conditionPriority from '../../../components/condition/priority.vue'
import conditionTags from '../../../components/condition/tags.vue'
import conditionAttribute from '../../../components/condition/attribute.vue'
import conditionWarehouse from '../../../components/condition/warehouse.vue'
import conditionOverdue from '../../../components/condition/overdue.vue'
import conditionStatus from '../../../components/condition/status.vue'
import conditionDate from '../../../components/condition/date.vue'
import conditionKeyWord from '../../../components/condition/keyword.vue'
import ganttchart from '@/components/projectComponents/ganttchart.vue'
import pagination from '@/components/Pagination/index.vue'
import {
  getTreeData
} from '@/api/task'
import {
  list
} from '@/api/doc'

export default {
  name: "index",
  props: ['componentType', 'taskMinHeight', 'form','projId'],
  data() {
    return {
      curHeight: null,
      switchType: "list",
      activeName: '',
      loading: false,
      milepostForm: [{
        name: '关联任务的里程碑22',
        progress: '58%'
      },
        {
          name: '测试g',
          progress: '75%'
        },
        {
          name: '01-准备',
          progress: '0%'
        },
        {
          name: '需求',
          progress: '67%'
        },
        {
          name: '111110',
          progress: '100%'
        },
        {
          name: 'release1.0',
          progress: '52%'
        },
      ],
      keywordTitle: '',
      startDate: '',
      endDate: '',
      planDate: '',
      moreType: false,
      ordersForm: [{
        name: '默认排序',
        type: ''
      },
        {
          name: '创建时间',
          type: 'des'
        },
        {
          name: '更新时间',
          type: 'des'
        },
        {
          name: '结束时间',
          type: 'des'
        },
        {
          name: '优先级',
          type: 'des'
        }
      ],
      taskForm: [],
      ordersIndex: 0,
      taskHeight: 'calc(100vh - 84px)',
      listQuery: {
        current: 1,
        size: 20,
        parentId: undefined,
        level: undefined,
        taskType: '',
        projId: '',
        masterUserId: '',
        status: '',
        matrix: '',
        name: '',
        taskTags: [],
      },
      total: 0,
    }
  },
  watch: {
    //form 为项目信息，采用于在项目中直接添加任务
    form: {
      handler(val, oldval) {
        this.projectform = val
      },
      // 深度观察监听
      deep: true,
      immediate: true
    },
    taskMinHeight: {
      handler(newName, oldName) {
        if (newName) {
          console.log(newName)
          console.log(oldName)
          console.log('任务高度')
          this.taskHeight = newName
        }
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    },
  },
  components: {
    selectRole,
    taskIndex,
    rename,
    delContnet,
    conditionProject,
    conditionPersonInCharge,
    conditionMilepost,
    conditionCreator,
    conditionCollaborators,
    conditionPriority,
    conditionTags,
    conditionAttribute,
    conditionWarehouse,
    conditionOverdue,
    conditionStatus,
    conditionDate,
    conditionKeyWord,
    ganttchart,
    pagination
  },
  created() {
    if (!utils.isNull(this.form)) {
      this.projectform = this.form
    }
    if (this.$route.query.id) {
      this.listQuery.projId = this.$route.query.id
    }
    this.list()
    this.$EventBus.$on('task-add', res => { // 监听新增完毕
      console.log('111111111111111111111111111111111111111111111111111');
      this.list()
    });
  },
  mounted() {
    this.comeIn()
    this.beforeMount()
  },
  methods: {
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          var h = document.documentElement.clientHeight || document.body.clientHeight
          this.curHeight = h - 280//减去页面上固定高度height
        })()
      }
    },
    comeIn() {
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 280//减去页面上固定高度height
    },
    // 查询树列表
    list() {
      var _this = this
      console.log(_this.listQuery)
      getTreeData(_this.listQuery).then(res => {
        const {
          data
        } = res
        this.taskForm = data.data;
        this.total = data.total
      })
    },
    //顶部tab切换
    tabClick(data) {
      console.log(data)
      var _this = this
      _this.listQuery.current = 1
      _this.listQuery.size = 20
      _this.listQuery.taskType = data.name
      _this.list()
      if (this.switchType == 'chart') {
        this.$refs.ganttchart.statusclick(data.name)
      }

      // if(data.index == '0'){
      // 	_this.listQuery.taskType = '00'
      // 	_this.list()
      // }else if(data.index == '1'){
      // 	console.log('我进来1了')
      // 	_this.listQuery.taskType = '01'
      // 	_this.list()
      // }else if(data.index == '2'){
      // 	_this.listQuery.taskType = '02'
      // 	_this.list()
      // }else if(data.index == '3'){
      // 	_this.listQuery.taskType = '04'
      // 	_this.list()
      // }else if(data.index == '4'){
      // 	_this.listQuery.taskType = '05'
      // 	_this.list()
      // }else if(data.index == '5'){
      // 	_this.listQuery.taskType = '06'
      // 	_this.list()
      // }
    },

    loadSwitch(data) {
      this.switchType = data
      if (data != 'chart') {
        this.list()
      }
    },
    currentChange(data) {
      var _this = this
      this.loading = true
      setTimeout(function () {
        _this.loading = false
      }, 2000)
    },
    taskAdd() {
      if (this.$route.query.id) {
        this.$router.push({
          path: '/task/add',
          query: {projId: this.$route.query.id, projName: this.projectform.name, dirId: this.$route.query.dirId}
        })
      } else {
        this.$router.push({path: '/task/add'})
      }
    },
    loadRename() {
      this.$refs.renames.loadRename()
    },
    loadDel() {
      this.$refs.del.loadDel()
    },
    moreClick() {
      this.moreType = !this.moreType
    },
    ordersClick(index, item) {
      var _this = this
      if (_this.ordersIndex == index) {
        if (item.type == 'asc') {
          item.type = 'des'
        } else {
          item.type = 'asc'
        }
      } else {
        _this.ordersIndex = index
        item.type = 'des'
      }
    },
    // 选择项目
    selectProj(data) {
      console.log(data)
      this.listQuery.current = 1,
          this.listQuery.size = 20,
          this.listQuery.projId = data.projId
      this.list()
    },
    // 选择负责人
    selectPerson(data) {
      if (this.switchType == 'list') {
        this.listQuery.current = 1,
            this.listQuery.size = 20,
            this.listQuery.masterUserId = ''
        if (data.length > 0) {
          this.listQuery.masterUserId = data[0].userId
        }
        this.list()
      } else {
        if (data.length == 0) {
          this.$refs.ganttchart.listTypeChange('masterUserId', '')
          return;
        }
        this.$refs.ganttchart.listTypeChange('masterUserId', data[0].userId)
      }
    },
    // 状态选择
    satausClick(data) {
      this.listQuery.current = 1,
          this.listQuery.size = 20,
          this.listQuery.status = data.value
      this.list()
    },
    // 优先级
    selectPriority(data) {
      if (this.switchType == 'list') {
        this.listQuery.current = 1,
            this.listQuery.size = 20,
            this.listQuery.matrix = ''
        if (data) {
          this.listQuery.matrix = data.value
        }
        this.list()
      } else {
        this.$refs.ganttchart.listTypeChange('matrix', data.value)
      }
    },
    //输入框
    selectInput(data) {
      if (this.switchType == 'list') {
        this.listQuery.current = 1,
            this.listQuery.size = 20,
            this.listQuery.name = data
        this.list()
      } else {
        this.$refs.ganttchart.listTypeChange('name', data)
      }
    },
    // 标签
    tagClick(data) {
      var tags = []
      this.listQuery.current = 1,
          this.listQuery.size = 20,
          data.forEach(function (item) {
            tags.push(item.tagId)
          })
      if (this.switchType == 'list') {
        this.listQuery.taskTags = tags.join(',')
        this.list()
      } else {
        this.$refs.ganttchart.listTypeChange('taskTags', tags.join(','))
      }

    },
    // 清空
    emptyClick() {
      if (this.switchType == 'list') {
        if (utils.isNull(this.$route.query.id)) {
          this.listQuery.projId = '',
              this.$refs.proj.emptyClick()
        }
        this.listQuery.current = 1,
            this.listQuery.size = 20,
            this.listQuery.masterUserId = ''
        this.listQuery.status = ''
        this.listQuery.matrix = ''
        this.listQuery.name = ''
        this.listQuery.taskTags = ''
        this.$refs.masterUser.emptyClick()
        this.$refs.status.emptyClick()
        this.$refs.matrix.emptyClick()
        this.$refs.name.emptyClick()
        this.$refs.tags.emptyClick()
        this.list()
      } else {
        // this.$refs.proj.emptyClick()
        this.$refs.masterUser.emptyClick()
        this.$refs.status.emptyClick()
        this.$refs.matrix.emptyClick()
        this.$refs.name.emptyClick()
        this.$refs.tags.emptyClick()
        this.$refs.ganttchart.listTypedelect()
      }
    }
  },
}
</script>

<style scoped>
.app {
  display: flex;
  padding: 0 !important;
  /* height: calc(100vh - 84px); */
}

.task-left {
  flex: 1;
  padding: 24px 36px 0px 36px;;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
}

.task-left_type {
  flex: 1;
  padding: 0px 36px 24px 0px;
  box-sizing: border-box;
  position: relative;
  overflow-y: auto
  /* overflow: auto; */
}

.task-right {
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  z-index: 2;
  width: 252px;
  background-color: #f5f6f8;
  height: calc(100vh - 84px);
  /* height: 100%; */
  padding-top: 20px;
}

.task-left-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dadee3;
  margin-bottom: 20px;
}

.task-left-headertwo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  border-bottom: 1px solid #dadee3;
  margin-bottom: 20px;
}

.task-table-item-address {
  margin: 0 10px;
  padding: 0 10px;
  background: #f5f6f8;
  border: 0;
  border-radius: 2px;
  white-space: nowrap;
  cursor: pointer;
  color: #909aaa;
}

.task-table-item-address:hover {
  color: #333;
  background: #e7e9ee;
}

.task-table-item-address-title {
  font-size: 12px;
}


.task-pagination {
  width: 100%;
  height: 37px;
}

.task-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.emptyTitle {
  font-size: 14px;
  color: #909aaa;
  margin-right: 10px;
  display: block;
  width: 30px;
}

.emptyTitle:hover {
  color: #2c7ef8;
}


.task-select-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}


.task-more-item {
  width: 135px;
  margin-right: 8px;
  /* max-width: 130px;
  min-width: 20px; */
  /* width: 100%; */
}

.mb-8 {
  margin-bottom: 8px;
}


.more-screen-box {
}

.more-screen-hidden {
  display: none;
  transition: all .5s;
}

.more-screen-show {
  display: block;
  transition: all .5s;
}

/deep/ .el-tabs__nav-wrap::after {
  background-color: white;
}

/deep/ .el-tabs__item {
  color: #909aaa;
  padding: 0 10px;
}

/deep/ .el-tabs__item.is-active {
  color: #1890ff;
}

/deep/ .el-tabs__header {
  margin-bottom: 1px;
}

.document-right-header-right-switch {
  width: 72px;
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  margin-right: 20px;
  cursor: pointer;
}

.switch-bg {
  background-color: #677e9f;
  border-color: #677e9f;
}

.document-right-header-right-switch-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dadee3;
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.document-right-header-right-switch-itemTwo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dadee3;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.document-right-header-right-switch-item-title {
  font-size: 14px;
  color: white;
}

.switch-color {
  color: #677e9f !important;
}
</style>
